@charset "UTF-8";
// Copyright (C) 2019 Checkmk GmbH - License: GNU General Public License v2
// This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
// conditions defined in the file COPYING, which is part of this source code package.

@use "_mixins" as *;

/* Styles used by the dashboard only */
body.dashboard {
  overflow: hidden;

  &.main div#main_page_content:not(.simplebar-scrollable-x) {
    padding-bottom: 0;
  }

  #menu_entry_toggle_edit img.icon {
    background-size: 16px;
  }

  #menu_shortcut_toggle_edit,
  #menu_suggestion_toggle_edit {
    img.icon {
      background-size: 20px;
    }
  }
}

div#dashboard {
  position: relative;
  padding: 0;
  margin: 0;
}

div.dashlet {
  position: absolute;
  z-index: 1;
  display: none;
  padding: 0;
  margin: 0;

  /* content area of dashlet, if no iframes are used */
  div.dashlet_inner {
    position: absolute;
    padding: 0;
    margin: 0;
    overflow: hidden;

    /* Dashlets with "background" set to True */
    &.background {
      background-color: $dashlet-inner-bg-color;
    }

    div.dashlet_content_wrapper {
      height: 100%;
    }
  }

  iframe {
    border-style: none;
  }

  > div.title {
    position: absolute;
    left: 0;
    width: 150px; /* will be changed by javascript later */
    height: 22px;
    padding: 0;
    padding-top: 0;
    padding-left: 9px;
    margin: 0;
    overflow: hidden;
    font-weight: $font-weight-default;
    letter-spacing: 2px;
    color: $font-color;
    text-align: center;
    white-space: nowrap;
    background: $dashlet-body-bg-color;

    &.highlighted {
      background: $headline-color;
    }

    span {
      padding-left: 8px;
    }
  }

  g.title a text,
  div.title a {
    @include ellipsis-text-overflow;
    color: $font-color;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  /* Styles for various builtin dashlets */
  canvas.pie {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 10;
    transform: scale(0.8, 0.8);
    transform-origin: center;
  }

  img.globe {
    position: absolute;
    top: 5px;
    left: 7px;
    z-index: 20;
    filter: grayscale(100%);
    transform: scale(0.8, 0.8);
    transform-origin: center;
  }

  div.graph > div.v_axis_label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: rotate(-90deg) translateX(50%);
  }
}

div.dashlet > div.title span {
  position: relative;
  top: 4px;
  padding-left: 0; /* left align with titles of contained views */
}

/* Inside a dashlet, we need a different color here in order to see a difference w.r.t. the title*/
div.dashlet div.success {
  background-color: $base-color;
}

div.dashlet_inner div.stats table.hoststats a,
div.dashlet_inner div.stats table.hoststats body.main .popup_menu span,
body.main .popup_menu div.dashlet_inner div.stats table.hoststats span {
  color: $font-color;
}

div.dashlet_inner div.stats {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: $bg-color-secondary;

  table th,
  table td {
    background: $dashboard-stats-bg-color;
    border-top: 1px solid $dashlet-stats-border-top-color;
    border-bottom: none;
  }
}

div.site_overview div.dashlet_inner,
div.average_scatterplot div.dashlet_inner {
  overflow: visible;
}

body.main.dashlet {
  padding: 8px;
  background-color: $dashlet-body-bg-color;
  box-sizing: border-box;

  div#row_info {
    display: none;
  }

  table.data.table {
    padding: 0 8px;

    tr.data {
      transition: 0.15s ease-in-out;
    }
  }

  /* warning messages in view dashlets */
  div.warning {
    margin: 0;
    margin-bottom: 10px;
    border-radius: 0;
    box-shadow: 0;
  }

  &.view {
    padding: $h3-margin-bottom 0 0; // add padding-top for consistency with other tables
    overflow: hidden;
    background-color: $dashlet-inner-bg-color;

    div#dashlet_content_wrapper[data-simplebar="init"] {
      height: 100%;
      overflow: auto;

      &.simplebar-scrollable-x div#data_container {
        padding-bottom: $simplebar-track-width;
      }

      &.simplebar-scrollable-y div#data_container {
        padding-right: $simplebar-track-width;
      }

      > div.simplebar-track.simplebar-horizontal {
        height: $simplebar-track-width;

        div.simplebar-scrollbar:before {
          top: 3px;
        }
      }
    }
  }
}

div[id^="dashlet"] div.dashlet_inner > div {
  box-sizing: border-box;
  transition: 0.15s ease-in-out;
}

div[id^="dashlet"] div.title + div.dashlet_inner > div {
  border-radius: 0;
}

iframe[id^="dashlet_iframe"] {
  background: $bg-color-secondary;
  transition: 0.15s ease-in-out;
}

/*
 * Dashboard editing
 */

/* dashlet controls */
div.dashlet.edit {
  .controls {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 100%;
    cursor: auto;
    background-color: rgba($dashlet-inner-bg-color, 0.8);
    border: 1px dashed $dashlet-editor-controls-color;

    &:hover {
      cursor: move;
    }
  }

  div.centered_controls {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 3 * ($dashlet-editor-icon-size + 8px);
    height: 3 * $dashlet-editor-icon-size;
    margin: auto;
    text-align: center;

    .editor a {
      display: inline-block;
      width: $dashlet-editor-icon-size;
      height: $dashlet-editor-icon-size;
      margin: 0 4px;
      cursor: pointer;
      background-repeat: no-repeat;
      background-size: $dashlet-editor-icon-size;
      border-radius: 5px;

      &:hover {
        opacity: 0.7;
      }

      &.edit {
        background-image: url("images/dashlet_edit.svg");
      }

      &.clone {
        background-image: url("images/dashlet_clone.svg");
      }

      &.del {
        background-image: url("images/dashlet_delete.svg");
      }
    }
  }

  &:not(.resizable) div.centered_controls {
    height: $dashlet-editor-icon-size;
  }

  /* position anchors */
  .anchor {
    position: absolute;
    cursor: pointer;

    // Edit with this tricks
    // https://css-tricks.com/the-shapes-of-css/#triangle-top-left-shape

    &.on div {
      position: absolute;
      padding: 2px 6px;
      color: $font-color-light-bg;
      text-align: center;
      background-color: $success;
      border-radius: 12px;

      &.anchor_image {
        width: 15px;
        height: 15px;
        padding: 0;
        background-image: url("images/dashlet_anchor.svg");
        background-repeat: no-repeat;
      }
    }

    &.anchor0 {
      top: 0;
      left: 0;
      border-top: $dashlet-anchor-size solid $dashlet-editor-controls-color;
      border-right: $dashlet-anchor-size solid transparent;

      &.on {
        border-top: $dashlet-anchor-on-size solid $success;
        border-right: $dashlet-anchor-on-size solid transparent;

        div {
          &.anchor_label {
            top: -$dashlet-anchor-size;
            left: $dashlet-anchor-size;
          }

          &.anchor_image {
            top: -$dashlet-anchor-size - $spacing;
            left: 3px;
          }
        }
      }
    }

    &.anchor1 {
      top: 0;
      right: 0;
      border-top: $dashlet-anchor-size solid $dashlet-editor-controls-color;
      border-left: $dashlet-anchor-size solid transparent;

      &.on {
        border-top: $dashlet-anchor-on-size solid $success;
        border-left: $dashlet-anchor-on-size solid transparent;

        div {
          &.anchor_label {
            top: -$dashlet-anchor-size;
            right: $dashlet-anchor-size;
          }

          &.anchor_image {
            top: -$dashlet-anchor-size - $spacing;
            right: 3px;
          }
        }
      }
    }

    &.anchor2 {
      right: 0;
      bottom: 0;
      border-bottom: $dashlet-anchor-size solid $dashlet-editor-controls-color;
      border-left: $dashlet-anchor-size solid transparent;

      &.on {
        border-bottom: $dashlet-anchor-on-size solid $success;
        border-left: $dashlet-anchor-on-size solid transparent;

        div {
          &.anchor_label {
            right: $dashlet-anchor-size;
          }

          &.anchor_image {
            right: 3px;
            bottom: -$dashlet-anchor-size - $spacing;
          }
        }
      }
    }

    &.anchor3 {
      bottom: 0;
      left: 0;
      border-right: $dashlet-anchor-size solid transparent;
      border-bottom: $dashlet-anchor-size solid $dashlet-editor-controls-color;

      &.on {
        border-right: $dashlet-anchor-on-size solid transparent;
        border-bottom: $dashlet-anchor-on-size solid $success;

        div {
          &.anchor_label {
            left: $dashlet-anchor-size;
          }

          &.anchor_image {
            bottom: -$dashlet-anchor-size - $spacing;
            left: 3px;
          }
        }
      }
    }
  }

  div.slim_controls {
    div.resize_image {
      visibility: hidden;
    }

    div.anchor_image {
      visibility: hidden;
    }

    div.anchor_label {
      visibility: hidden;
    }

    .anchor {
      &.anchor0,
      &.anchor0.on {
        border-top-width: $dashlet-anchor-size-slim;
        border-right-width: $dashlet-anchor-size-slim;
      }

      &.anchor1,
      &.anchor1.on {
        border-top-width: $dashlet-anchor-size-slim;
        border-left-width: $dashlet-anchor-size-slim;
      }

      &.anchor2,
      &.anchor2.on {
        border-bottom-width: $dashlet-anchor-size-slim;
        border-left-width: $dashlet-anchor-size-slim;
      }

      &.anchor3,
      &.anchor3.on {
        border-right-width: $dashlet-anchor-size-slim;
        border-bottom-width: $dashlet-anchor-size-slim;
      }
    }
  }
}

div#dashboard.grid {
  background-image: url("images/dashboard_grid.png");
}

.sizer {
  position: relative;
  right: 0;
  left: 0;
  width: 100%;
  padding: 2px 6px;
  margin: 4px auto;
  text-align: center;
  cursor: pointer;
  border-radius: 12px;
  box-sizing: border-box;

  &.max {
    color: $font-color-red;
    background-color: $dashlet-editor-controls-color;
  }

  &.grow {
    color: $font-color-white;
    background-color: $dashlet-editor-controls-color;
  }

  &.abs {
    color: $font-color-light-bg;
    background-color: $success;
  }
}

/* transparent resize areas for absolute sized */
.resize {
  position: absolute;
  z-index: 70;

  &.circle_handle .resize_image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin: auto;
    background-image: url("images/dashlet_resize.svg");
    background-repeat: no-repeat;
  }
}

.resize0 {
  top: 0;
  bottom: 0;
  height: 100%;
  margin: auto;
  background-color: $color-state-success-background;
  border: 1px solid $color-state-success-background;
  border-top: none;
  border-bottom: none;

  &.resize0_0 {
    left: -1px;
    cursor: w-resize;

    &.circle_handle {
      width: $dashlet-resize-handle-height;
      height: $dashlet-resize-handle-width;
      border-radius: 0 $dashlet-resize-handle-width $dashlet-resize-handle-width 0;

      .resize_image {
        transform: rotate(90deg);
      }

      div.slim_controls & {
        width: $dashlet-resize-handle-height-slim;
        height: $dashlet-resize-handle-width-slim;
      }
    }
  }

  &.resize0_1 {
    right: -1px;
    cursor: e-resize;

    &.circle_handle {
      width: $dashlet-resize-handle-height;
      height: $dashlet-resize-handle-width;
      border-radius: $dashlet-resize-handle-width 0 0 $dashlet-resize-handle-width;

      .resize_image {
        transform: rotate(-90deg);
      }

      div.slim_controls & {
        width: $dashlet-resize-handle-height-slim;
        height: $dashlet-resize-handle-width-slim;
      }
    }
  }
}

.resize1 {
  right: 0;
  left: 0;
  width: 100%;
  margin: auto;
  background-color: $color-state-success-background;
  border: 1px solid $color-state-success-background;
  border-right: none;
  border-left: none;

  &.resize1_0 {
    top: -1px;
    cursor: n-resize;

    &.circle_handle {
      width: $dashlet-resize-handle-width;
      height: $dashlet-resize-handle-height;
      border-radius: 0 0 $dashlet-resize-handle-width $dashlet-resize-handle-width;

      .resize_image {
        transform: rotate(180deg);
      }

      div.slim_controls & {
        width: $dashlet-resize-handle-width-slim;
        height: $dashlet-resize-handle-height-slim;
      }
    }
  }

  &.resize1_1 {
    bottom: -1px;
    cursor: s-resize;

    &.circle_handle {
      width: $dashlet-resize-handle-width;
      height: $dashlet-resize-handle-height;
      border-radius: $dashlet-resize-handle-width $dashlet-resize-handle-width 0 0;

      div.slim_controls & {
        width: $dashlet-resize-handle-width-slim;
        height: $dashlet-resize-handle-height-slim;
      }
    }
  }
}

.resize_corner {
  z-index: 80;
  width: 10px;
  height: 10px;
}

.resize_corner0 {
  top: 0;
  left: 0;
  cursor: nw-resize;
}

.resize_corner1 {
  top: 0;
  right: 0;
  cursor: ne-resize;
}

.resize_corner2 {
  right: 0;
  bottom: 0;
  cursor: se-resize;
}

.resize_corner3 {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
}

.dashlet.pnpgraph .dashlet_inner {
  color: $font-color;
  text-align: left;
  background-color: $dashlet-inner-bg-color;
}

.dashlet.pnpgraph .graph {
  border: none;
  box-shadow: none;
}

.dashlet.pnpgraph .container {
  background-color: $dashlet-inner-bg-color;
}

.dashlet.pnpgraph div.title a {
  color: $font-color;
}

svg {
  .title,
  .single_value,
  .state_component {
    fill: $font-color;

    text {
      stroke: none; // there is conflict with a general: svg text
    }
  }

  .status_background {
    opacity: 0.6;
    fill: $dashlet-inner-bg-color;
  }

  .line {
    fill: none !important;
  }

  .area {
    opacity: 0.3;
  }

  // gauge
  .gauge_span {
    fill: $gauge-span-color;

    & ~ path.single_value {
      fill: $gauge-single-value-color;
    }
  }

  .inventory {
    foreignObject > div {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      & > div {
        width: 100%;
        font-weight: $font-weight-bold;
        text-align: center;
        overflow-wrap: break-word;
      }
    }
  }
}

svg.renderer {
  g.grid path {
    stroke-width: 0;
  }

  g.grid line {
    stroke: $dashlet-figures-grid-color;
    stroke-opacity: 0.61;
    stroke-width: 0.5px;
  }
}

div.dashlet.nodata {
  > div.dashlet_inner div.msg {
    padding: 10px;
  }
}

div.site_overview,
div.alert_overview,
div.stats_dashlet {
  g.element_box:hover {
    path + path {
      fill-opacity: 0.96;
    }
  }

  div.tooltip {
    h3 {
      margin-top: 2px;
      margin-bottom: 2px;
    }

    td.color {
      width: 10px;

      &.critical {
        background-color: $hexagon-critical-color;
      }

      &.unknown {
        background-color: $hexagon-unknown-color;
      }

      &.warning {
        background-color: $color-state-1-background;
      }

      &.downtime {
        background-color: $hexagon-downtime-color;
      }

      &.ok {
        background-color: $success;
      }
    }

    td.count {
      padding-left: 4px;
      text-align: right;
      vertical-align: top;
    }
  }

  path.hexagon.hexagon_0 {
    stroke: $grey-3;
  }

  path.hexagon {
    &.critical,
    &.down {
      fill: $hexagon-critical-color;
      fill-opacity: 0.8;
      stroke: $hexagon-critical-color;
    }

    &.unknown,
    &.unreachable {
      fill: $hexagon-unknown-color;
      fill-opacity: 0.8;
      stroke: $hexagon-unknown-color;
    }

    &.warning {
      fill: $color-state-1-background;
      fill-opacity: 0.6;
      stroke: $color-state-1-background;
    }

    &.downtime {
      fill: $hexagon-downtime-color;
      fill-opacity: 0.6;
      stroke: $hexagon-downtime-color;
    }

    &.host_down {
      fill: $hexagon-host-down-color;
      fill-opacity: 0.5;
      stroke: $hexagon-host-down-color;
    }

    &.ok {
      fill: $success;
      fill-opacity: 0.06;
      stroke: $success;
      stroke-opacity: 0.9;
    }
  }

  g.element_box.host_element path.hexagon,
  path.hexagon.host_element {
    fill-opacity: 0.8;
    stroke-opacity: 0.8;

    &.ok {
      fill: $host-hexagon-ok-stroke-color;
      stroke: none;

      + path.up:hover,
      &:hover + path.up {
        fill-opacity: 0.6;
      }
    }

    &.up {
      fill: $headline-color;
      fill-opacity: 0.85;
      stroke: none;
    }
  }

  path.icon_element {
    fill: $headline-color;
    stroke-dasharray: 3, 3;
    stroke: $grey-3;
  }
}

div.stats_dashlet {
  height: 100%;

  path.hexagon.empty {
    fill: $hexagon-empty-color;
    fill-opacity: $hexagon-empty-fill-opacity;
    stroke: $hexagon-empty-stroke-color;
    stroke-opacity: $hexagon-empty-stroke-opacity;
  }

  div.stats_table {
    position: absolute;
    right: 0;

    table {
      pointer-events: all;
      border-collapse: collapse;
    }

    td {
      padding: 3px;
    }

    td:last-child {
      width: 115px; // aligns the host and service stats tables
    }

    a {
      text-decoration: none;
      cursor: pointer;

      &.box {
        display: inline-block;
        width: $spacing-half;
        height: 14px;
        padding: 0;
        background-color: $font-color;
        border-radius: $theme-border-radius;

        &.critical {
          background-color: $hexagon-critical-color;
        }

        &.unknown {
          background-color: $hexagon-unknown-color;
        }

        &.warning {
          background-color: $color-state-1-background;
        }

        &.downtime {
          background-color: $hexagon-downtime-color;
        }

        &.host_down {
          background-color: $hexagon-host-down-color;
        }

        &.ok {
          background-color: $success;
        }
      }

      &.count {
        float: right;
      }

      &.count:hover,
      &.text:hover {
        color: $font-color-green;
      }
    }

    .warning {
      background-color: transparent;
    }
  }

  &.hoststats div.stats_table,
  &.eventstats div.stats_table {
    top: 44px;
  }

  &.servicestats div.stats_table {
    top: 28px;
  }
}
